<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声明周期</title>
    <style>
        .image-container{
            width: 1000px;
        }
        .image-container img{
            width: 100%;
        }
    </style>
</head>
<body>
    <button>来个看图神器</button>
    <button>下去吧</button>
    <hr>

    <div id="root"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">

        //获取元素
        let btns = document.querySelectorAll('button');


        class App extends React.Component{

            state = {
                url: 'http://127.0.0.1:8090/image/random'
            }

            change = () => {
                this.setState({
                    url: 'http://127.0.0.1:8090/image/random?t=' + Math.random()
                })
            }

            render(){
                return <div className="image-container" onClick={this.change}>
                        <img src={this.state.url} alt="" />
                    </div>
            }

            //组件挂载完毕  did 完成  mount 挂载   
            //组件挂载完毕: 启动定时器, 发送AJAX请求 等初始化的操作
            componentDidMount(){
                console.log('组件挂载完毕');
            }

            //组件将要卸载  will 将要  unmount 卸载
            //组件将要卸载: 停止定时器, 关闭异步任务. 收尾工作
            componentWillUnmount(){
                console.log('组件将要卸载');
            }

        }

        //渲染组件
        btns[0].onclick = function(){
            ReactDOM.render(<App />, document.querySelector("#root"));
        }

        btns[1].onclick = function(){
            //unmount 卸载 mount 挂载  component组件  at 在...  Node 节点
            ReactDOM.unmountComponentAtNode(document.querySelector("#root"));
        }

    </script>
</body>
</html>